<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8" />
    <!--如果是IE 就以标准渲染-->
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />

    <!-- 视窗——————响应式布局 -->
    <meta name="viewport" content="width=device-width,initial-scale=1.0,maximum-scale=1.0,user-scalable=0" />

    <!--当前页面的三要素-->
    <title>运维系统</title>
    <meta name="description" content="聚能优电" />
    <meta http-equiv="keywords" content="聚能优电" />

    <script type="text/javascript" src="./js/verify.js"></script>

    <!-- css -->
    <link rel="stylesheet" type="text/css" href="./css/common/common.css" />
    <link rel="stylesheet" type="text/css" href="./css/mainmonitor.css" />
    <style>
        .mainmonitor_screen .sb_tit{
            margin-top:1.55rem;
            font-size:0;
            width:100%;
            
        }
        .mainmonitor_screen .sb_tit #selectsx{
            vertical-align: top;
            width: 26%;
            height: 30px;
            line-height: 30px;
            font-size: 12px;
            font-family: SourceHanSansCN;
            letter-spacing: 0;
            font-weight: 400;
            background: #0167FF;
            color: #fff;
            border-right:1px solid #000;
            border-top-left-radius: 31px;
            border-bottom-left-radius: 31px;
            padding-left: 0.2rem;
        }
        .mainmonitor_screen .sb_tit #inputcon{
            vertical-align: top;
            width:45%;
            height: 28px;
            line-height: 30px;
            text-align: center;
            text-align-last: center;
            font-size: 12px;
            font-family: SourceHanSansCN;
            letter-spacing: 0;
            font-weight: 400;
            background: transparent;
            color: #536680;
            background: transparent;
            border: 1px solid rgba(1,103,255,0.3);
            border-top-right-radius: 31px;
            border-bottom-right-radius: 31px;
        }
        .mainmonitor_screen .sb_tit .tosearch{
            vertical-align: top;
            display:inline-block;
            font-size: 14px;
            width: 1.2rem;
            height:0.6rem;
            margin-left:10px;
            border-radius: 30px;
            color:#fff;
            background:url('./images/search.svg') no-repeat center/contain;
        }

    </style>
</head>

<body>
    <div id="container" class="mainmonitor">
        <div class="mainmonitor_01">
            <!--主屏内容-->
            <div class="mainmonitor_screen">
                <div class="m_title">
                    <a href="JavaScript:history.go(-1);" class="back">
                        <img src="./images/back.svg" alt="">
                    </a>
                    <span class="tit">综合监控</span>
                </div>

                <div class="sb_tit">
                    <select id="selectsx" value="">
                        <option value="3" selected>按项目名称</option>
                    </select>
                    <input type="text" placeholder="请输入搜索内容" id="inputcon" />
                    <span class="tosearch" id="tosearch"></span>
                </div>


                <div class="m_list" id="project_list" style="margin-top: 0.5rem;">
                    <!-- <div class="l_con">
                        <p class="xmlist">项目一</p>
                        <div class="xmtit">深中通道搅拌站</div>
                        <div class="xmdata">
                            <span class="d_status">正常</span>
                            <span class="d_time">2020-02-16</span>
                            <span class="d_name">李斯</span>
                            <span class="d_tel">18625931475</span>
                        </div>
                        <div class="xmaddress">
                            <div class="a_icon">
                                <img src="./images/position.svg" alt="">
                            </div>
                            <div class="a_con">
                                广东省深圳市南山区
                            </div>
                        </div>

                        <div class="xmdetail"
                            onClick="window.location.href='mainmonitor_sz.html'">
                            <p>
                                查看详情
                            </p>

                        </div>
                    </div>

                    <div class="l_con">
                        <p class="xmlist">项目一</p>
                        <div class="xmtit">深中通道搅拌站</div>
                        <div class="xmdata">
                            <span class="d_status">正常</span>
                            <span class="d_time">2020-02-16</span>
                            <span class="d_name">李斯</span>
                            <span class="d_tel">18625931475</span>
                        </div>
                        <div class="xmaddress">
                            <div class="a_icon">
                                <img src="./images/position.svg" alt="">
                            </div>
                            <div class="a_con">
                                广东省深圳市南山区
                            </div>
                        </div>

                        <div class="xmdetail"
                            onClick="window.location.href='mainmonitor_sz.html'">
                            <p>
                                查看详情
                            </p>

                        </div>
                    </div> -->


                </div>

            </div>
        </div>
    </div>


    <script>
        (function (win, doc) {
            var docEl = doc.documentElement || document.body; //获取HTML标签

            var container = doc.getElementById("container"); //container元素
            //判断是移动端设备还是PC,移动 就采用'orientationchange',横竖屏事件，PC端就采用onresize，窗口改变时间
            var resize = "onorientationchange" in win ? "orientationchange" : "resize";

            function rem() {
                docEl.style.fontSize = 100 * (container.clientWidth / 750) + "px";
            }

            //监听'DOMContent事件:DOM加载完成执行,如果DOMContent事件，那么执行rem函数
            doc.addEventListener("DOMContentLoaded", rem, false);

            //win下监听resize事件,如果resize事件，那么执行rem函数
            win.addEventListener(resize, rem, false);
        })(window, document);
    </script>
    <script type="text/javascript" src="./js/jquery-3.4.1.js"></script>
    <script>
        $(document).ready(function () {
            $.ajax({
                type: "GET",
                url: "http://112.74.169.99:21021/api/services/app/ProjectService/GetProjectInfosByUserid?userid=" + userid,
                beforeSend: function (xhr) {
                    xhr.setRequestHeader("Accept", "application/json, text/javascript, */*; q=0.01");
                    xhr.setRequestHeader("Authorization", accessToken);
                    xhr.setRequestHeader('.AspNetCore.Culture', 'zh-Hans');
                },
                success: function (res) {
                    // console.log("项目数据 请求成功");
                    var result = res.result;
                    
                    var data = [];
                    var result = res.result;

                    for (var i in result) {
                        if (result[i].status != "已完成") {
                            data.push( result[i] );
                        }
                    }
                    // console.log(data);
                    $("#project_list").html(eachproject(data));
                },
                error: function (err) {
                    console.log("项目数据 请求失败");
                }
            });

            $("#tosearch").click(function(){
                if( !$("#inputcon").val()){
                    layer.msg('请输入搜索信息', {
                        icon: 3,
                        time: 1000 //1秒关闭（如果不配置，默认是3秒）
                        }
                    );
                }else{
                    var params = {
                        type: $("#selectsx option:selected").attr('value'),
                        search: $("#inputcon").val()
                    };
                    $.ajax({
                        type: "GET",
                        url: "http://112.74.169.99:21021/api/services/app/ProjectService/GetProjectInfosBySearchAndUserid?search=" + params.search +"&userid=" + userid,
                        beforeSend: function (xhr) {
                            xhr.setRequestHeader("Accept", "application/json, text/javascript, */*; q=0.01");
                            xhr.setRequestHeader("Authorization", accessToken);
                            xhr.setRequestHeader('.AspNetCore.Culture', 'zh-Hans');
                        },
                        success: function (res) {
                            if(res.result.length > 0 ){
                                $("#project_list").html(``);
                                $("#project_list").html(eachproject(res.result));
                            }else if(res.result.length == 0){
                                $("#project_list").html(``);
                                $("#project_list").html(`没有搜索到,请重新搜索...`);
                                $("#project_list").css("color","red").css("font-size","14px").css("height","100px");
                            }
                        },
                        error: function (err) {
                            console.log("项目数据 请求失败");
                        }
                    });
                }
            });

            function eachproject(obj) {
                var str = '';
                if (obj.constructor == Array) {
                    for (var i = 0, len = obj.length; i < len; i++) {
                        
                        var onoff;

                        if (obj[i].status == '运行中') {
                            obj[i].status = '正常';
                            onoff = 'normal';
                        } else if (obj[i].status == '通讯异常') {
                            // obj[i].status = '通讯异常';
                            onoff = 'unnormal';
                        } else if (obj[i].status == '待运行') {
                            // obj[i].status = '通讯异常';
                            onoff = 'unstart';
                        }

                        let datetime = new Date(obj[i].creatTime);
                        let getFullYear = datetime.getFullYear();
                        let theMonth = datetime.getMonth() + 1;
                        let getMonth = theMonth < 10 ? '0' + theMonth : theMonth;
                        let getDate = datetime.getDate() < 10 ? '0' + datetime.getDate() : datetime.getDate();
                        let obj_time = getFullYear + '-' + getMonth + '-' + getDate;


                        var url = obj[i].remark1 + '?linechartid=' + obj[i].remark2 + '&projectid=' + obj[i].id + '&projectNameCN=' + obj[i].projectNameCN + '&description=' + obj[i].description;

                        str += `<div class="l_con l_list">`;
                        str += `<div class="xmicon"><div class="xmcon"></div></div>`;
                        str += `<div class="xmtit">` + obj[i].projectNameCN + `</div>`;
                        str += `<div class="xmdata">`;
                        str += `<span class="d_status ` + onoff + `">` + obj[i].status + `</span>`;
                        str += `<div class="a_con">` + obj[i].province + obj[i].city + `</div>`;
                        // str += `<span class="d_time">` + obj_time + `</span>`;
                        // str += `<span class="d_name">` + obj[i].managerName + `</span>`;
                        // str += `<span class="d_tel">18625931475</span>`;
                        str += `</div>`;
                        
                        str +=
                            `<div class="xmdetail" onClick="window.location.href='` + url + `'">`;
                        str += `<p>查看详情</p>`;
                        str += `</div>`;
                        str += `</div>`;

                    }
                    return str;
                }
            }
        });
    </script>


</body>

</html>